<template>
	<view class="container">
		<view class="one-sty">
			<view class="title-sty">
				<span class="bar"></span>
				电子征信
			</view>
			<view class="one-content">
				<van-grid :column-num="3" :border="false">
					<van-grid-item v-for="(item,index) in oneArr" :key="index">
						<view class="three-item">
							<image src="../../static/logo.png" style="height: 40px;width: 40px;" mode="aspectFit">
							</image>
							<view style="font-size: 12px;">{{item.name}}</view>
						</view>
					</van-grid-item>
				</van-grid>
			</view>
			
		</view>
		<view class="two-sty">
			<view class="title-sty">
				<span class="bar"></span>
				任务处理
			</view>
			<view class="two-content">
				<van-grid :column-num="3" :border="false">
					<van-grid-item v-for="(item,index) in twoArr" :key="index">
						<view class="three-item">
							<image src="../../static/logo.png" style="height: 40px;width: 40px;" mode="aspectFit">
							</image>
							<view style="font-size: 12px;">{{item.name}}</view>
						</view>
					</van-grid-item>
				</van-grid>
			</view>
		</view>
		<view class="three-sty">
			<view class="title-sty">
				<span class="bar"></span>
				我的直销
			</view>
			<view class="three-content">
				<van-grid :column-num="3" :border="false">
					<van-grid-item v-for="(item,index) in threeArr" :key="index">
						<view class="three-item">
							<image src="../../static/logo.png" style="height: 40px;width: 40px;" mode="aspectFit">
							</image>
							<view style="font-size: 12px;">{{item.name}}</view>
						</view>
					</van-grid-item>
				</van-grid>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
const oneArr = reactive([{
			icon: 'photo-o',
			name: '电子征信授权码'
		},
		{
			icon: 'photo-o',
			name: '电子征信授权查询'
		},
		{
			icon: 'photo-o',
			name: '电子征信结果查询'
		}
	])
	const twoArr = reactive([{
			icon: 'photo-o',
			name: '贷款申请'
		},
		{
			icon: 'photo-o',
			name: '九银申请入口'
		},
		
		{
			icon: 'photo-o',
			name: '签到打卡'
		},
		{
			icon: 'photo-o',
			name: '定位追踪'
		},
		{
			icon: 'photo-o',
			name: '车价评估查询'
		},
		{
			icon: 'photo-o',
			name: '补缺失件查询'
		},
		{
			icon: 'photo-o',
			name: '主管审批'
		}
	])
	const threeArr = reactive([{
				icon: 'photo-o',
				name: '直销码'
			},
			{
				icon: 'photo-o',
				name: '直销推广'
			},
			{
				icon: 'photo-o',
				name: '渠道直销'
			},
			{
				icon: 'photo-o',
				name: '结果查询'
			}
		])

	const state = reactive({
		username: '',
		password: ''
	});

	function handleLogin() {
		// 处理登录逻辑
	}
</script>

<style scoped lang="scss">
	@import "@/uni.scss";

	.container {
		// padding: 5px;
		// margin: 0 5px;
		display: flex;
		flex-direction: column;
		
	}

	.title-sty {
		position: relative;
		padding-left: 18px;
		height: 30px;
		line-height: 31px;
		background-color: #f5f5f5;
		font-size: 16px;
		font-weight: 600;
	
		/* 确保文字不会覆盖到竖杠 */
		.bar {
			position: absolute;
			left: 5px;
			top: 3px;
			bottom: 3px;
			width: 3px;
			background-color: $help-color;
		}
	}
	.one-content,.two-content,.three-content{
		background-color: #fff;
	}
	.three-item {
		height: 60px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
</style>
